<template>
  <div class="app-wrapper">
    <headerTitle
      :titleList="titleList"
      :hideButton="false"
      btnTitle="新增权限"
      icon="iconfont btn_jurisdiction icon-btn_jurisdiction"
      @handelClick="() => addAuth()"
    />
    <div class="app-container">
      <div class="block containerMain" ref="block">
        <div class="searchList">
          <div class="search-item">
            <div class="item-list">
              <div class="item-con">
                <span>权限名称</span>
                <el-input size="mini" class="item" v-model="searchform.name" placeholder="请输入权限名称"></el-input>
              </div>
              <div class="item-con">
                <span>权限描述</span>
                <el-input size="mini" class="item" v-model="searchform.remark" placeholder="请输入权限描述"></el-input>
              </div>
            </div>
            <div>
              <el-button type="primary" size="mini" @click="() => getList()">查询</el-button>
              <el-button type="default" size="mini" @click="() => reset()">重置</el-button>
            </div>
          </div>
        </div>
        <div class="div-table">
          <el-table
            size="small"
            :data="list"
            :header-cell-style="headerStyle"
            :height="tableHeight"
            :cell-style="cellStyle"
            highlight-current-row
          >
            <el-table-column label="权限名称">
              <template slot-scope="scope">{{ scope.row.name }}</template>
            </el-table-column>
            <el-table-column label="权限描述">
              <template slot-scope="scope">
                <span>{{ scope.row.remark }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="text" @click="() => viewAuth(scope.row)">查看</el-button>
                <el-button size="small" type="text"  @click="() => editAuth(scope.row)">编辑</el-button>
                <el-button size="small" type="text" v-if="!scope.row.showDefault"  @click="() => del(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <pagination :pagination="pagination" />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination/index";
import HeaderTitle from "@/components/Headertitle/index";
import { fetchData, fetchDel } from "@/api/systemapi/auth";
import { translateDataToTree } from "@/utils";
import { pageParams } from "@/settings";
import { getInfo } from "@/api/user"

export default {
  components: {
    Pagination,
    HeaderTitle
  },
  filters: {
    typeFilter(type) {
      const typeMap = {
        1: "目录",
        2: "菜单"
      };
      return typeMap[type];
    },
    statusFilter(status) {
      const statusMap = {
        1: "启用",
        2: "禁用"
      };
      return statusMap[status];
    },
    statusTypeFilter(status) {
      const statusMap = {
        1: "success",
        2: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      id : '',
      titleList: [{ title: "权限管理" }],
      treeData: null,
      list: null,
      tableHeight: "300", //表格默认高度
      listLoading: true,
      showBtn:true,
      defaultProps: {
        children: "children",
        label: "name",
        id: "id"
      },
      searchform: {
        entNum:'',
        name: "",
        remark: "",
        rows: "10",
        page: "1"
      },
      activeTitle: "新增角色", // 新增编辑菜单模态框标题
      formLabelWidth: "100px",
      selectedmenu: [], // 选择的菜单权限
      form: {
        name: "",
        remark: "",
        status: 1,
        sort: ""
      },
      showMenuErr: false, // 菜单未选择提示
      formrules: {
        name: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
          { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
        ]
      },
      // 分页
      pagination: pageParams
    };
  },
  watch: {
    // 分页
    "pagination.currentPage": function() {
      this.searchform.page = this.pagination.currentPage;
      this.getList();
    },
    "pagination.pageSize": function() {
      this.searchform.rows = this.pagination.pageSize;
      this.searchform.page = 1;
      this.getList();
    }
  },

  mounted: function () {
    this.searchform.entNum = this.$route.params.entNum;
    this.$nextTick(() => {
      let self = this;
      this.tableHeight = this.$refs.block.offsetHeight - 120;
      window.onresize = () => {
        return (() => {
          this.tableHeight = this.$refs.block.offsetHeight - 120;
        })();
      };
    });

    this.getList();
  },
  methods: {
    //表头背景颜色修改
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background:#F5F6FB;color:#666;padding-left:10px";
      }
    },
    cellStyle({row, rowIndex}) {
      return "padding-left: 10px;"
    },
    reset() {
      this.searchform = {
        entNum: this.$route.params.entNum,
        name: "",
        remark: "",
        rows: "10",
        page: "1"
      }
      // this.getList();
    },
    // 新增权限按钮事件
    addAuth() {
      this.$router.push({ path: '/vpmmanage/auth/add', query: { type: '1' ,id: null,entNum: this.searchform.entNum  }});
    },
    // 查看权限
    viewAuth(row) {
      this.$router.push({ path: '/vpmmanage/auth/add', query: { type: '3', id: row.id ,name: row.name,remark: row.remark,entNum: this.searchform.entNum }});
    },
    // 编辑权限
    editAuth(row) {
      this.$router.push({ path: '/vpmmanage/auth/add', query: { type: '2', id: row.id ,name: row.name,remark: row.remark,entNum: this.searchform.entNum}});
    },
    getList() {
      this.listLoading = true;
      fetchData({ ...this.searchform }).then(response => {
        this.list = response.data.rows;
        this.pagination.total = response.data.records;
        this.listLoading = false;
      });

    },
    fetchTreeData() {
      this.listLoading = true;
      getMenuTree().then(response => {
        this.menulist = response.data;
        this.treeData = translateDataToTree(response.data);
        this.listLoading = false;
      });
    },
    // 删除
    del(data) {
      this.$confirm("是否确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          fetchDel({id: data.id}).then(response => {
            if (response.code === 0) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList();
            } else {
              this.$message({
                message: response.msg,
                type: "error"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: 100%;
  .block {
    width: 100%;
    height: 100%;
    .searchList {
      padding: 20px 10px;
      .search-item {
        font-size: 14px;
        color: #333;
        display: flex;
        justify-content: space-between;
        .item-list {
          display: flex;
        }
        .item-con {
          display: flex;
          margin-right: 30px;
          span {
            display: inline-block;
            width: 60px;
            text-align: right;
            line-height: 28px;
            margin-right: 10px;
          }
        }
        .item {
          width: 180px;
        }
      }
    }
    .div-table {
      width: 100%;
    }
    .el-row {
      height: 300px;
      .el-col {
        height: 100%;
        .div-tree {
          height: 90%;
          .el-tree {
            height: 100%;
            overflow-y: auto;
          }
        }
      }
    }
  }
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
